<el-card>
  <h1>作者管理</h1>
  <el-divider />
  <el-form inline>
    <el-form-item>
      <el-input v-model="authorName" placeholder="作者名" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="searchAuthor">
        <template #icon><Search></Search></template>
        搜索
      </el-button>
    </el-form-item>
  </el-form>
</el-card>

<el-card style="margin-top: 20px">
  <template #header>
    <el-button circle plain @click="() => searchAuthor()">
      <template #icon><Refresh></Refresh></template>
    </el-button>
    <el-button type="primary" @click="addUpdateAuthorVisible">
      <template #icon><Plus></Plus></template>
      添加作者
    </el-button>
  </template>
  <el-table v-loading="loading" :data="authorList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="img" label="作者风采">
      <template #default="{row: {img}}">
        <el-image v-if="img" :src="img" fit="cover" style="width: 150px" />
      </template>
    </el-table-column>
    <el-table-column prop="description" label="作者描述" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-popconfirm title="确认删除当前用户？" @confirm="deleteAuthor(row.id)">
          <template #reference>
            <el-button text type="danger" size="small">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button text type="primary" size="small" @click="editAuthor(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :page-size="pagination.limit" :total="pagination.count" @current-change="handlecurrentChange" />
</el-card>

<el-dialog v-model="authorDialogVisible" :title="authorDialogTitle" width="500px">
  <el-form ref="authorRef" label-width="100px" :model="authorForm" :rules="authorFormRules">
    <el-form-item label="名称" prop="name">
      <el-input v-model="authorForm.name" />
    </el-form-item>
    <el-form-item label="图片">
      <el-upload class="author-upload-avatar" action="/upload/author_avatar" accept=".jpg,.png,.jpeg,.webp" :show-file-list="false" :on-success="handleAvatarSuccess">
        <el-image v-if="authorForm.img" :src="authorForm.img" fit="cover" style="width: 200px" />
        <el-button v-else type="primary">
          <template #icon>
            <Plus />
          </template>
          选择文件
        </el-button>
        <template #tip>
          <div class="el-upload__tip">jpg/png files with a size less than 50MB</div>
        </template>
      </el-upload>
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="authorForm.description" type="textarea" :max="300" :rows="7" />
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="authorDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addAuthor">确认</el-button>
    </span>
  </template>
</el-dialog>
